<template>
	<view class="flex-center flex-box" @tap="focusInput">
		<view class="serach-box">
			<uni-icons type="search" size="48rpx" color="#9A9A9A"></uni-icons>
			<input
				:disabled="isDisabled"
				type="text"
				v-model="serachVal"
				:placeholder="placeholder"
				class="input-box"
				placeholder-style="color:#7D7D7D"
			/>
		</view>
		<view v-if="showSerach" @tap="serach" class="serach-text">搜索</view>
	</view>
</template>
<script>
export default {
	props: {
		placeholder: String,
		showSerach: {
			type: Boolean,
			default: true,
		},
		isDisabled: {
			type: Boolean,
			default: false,
		},
		value: String,
	},
	data() {
		return {
			serachVal: '',
		}
	},
	methods: {
		serach() {
			this.$emit('serachInput', this.serachVal)
		},
		focusInput() {
			this.$emit('focusInput')
		},
	},
	watch: {
		value(val) {
			this.serachVal = val
		},
		serachVal(val) {
			if (!this.showSerach) {
				this.$emit('serachInput', val)
			}
		},
	},
}
</script>
<style lang="scss" scoped>
.serach-box {
	border-radius: 50rpx;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8rpx 8rpx 8rpx 20rpx;
	background: #f2f2f2;
	margin-right: 20rpx;
	margin: 0 20rpx 0 30rpx;
}
.input-box {
	width: 80%;
	padding-left: 10rpx;
	font-size: 30rpx;
}
.serach-text {
	width: 100rpx;
	color: #3a74fc;
}
</style>
